<template>

  <div class="RepairShops">
    <searchBar placeHolder='请输入维修厂名称/负责人'
               @handleSearch='init' />
    <el-table :data="shoplist"
              style="width: 100%">
      <el-table-column prop="company"
                       align="center"
                       label="维修厂名称">
      </el-table-column>
      <el-table-column prop="leader"
                       align="center"
                       label="负责人">
      </el-table-column>
      <el-table-column prop="phone"
                       align="center"
                       label="电话">
      </el-table-column>
      <el-table-column prop="address"
                       align="center"
                       label="详细地址">
      </el-table-column>
      <el-table-column prop="create_time"
                       align="center"
                       label="申请时间">
      </el-table-column>
      <el-table-column prop=""
                       align="center"
                       label="物料详情">
        <template slot-scope="scope">
          <el-button type="text"
                     @click="rowData=scope.row,detailsVisible=true">详情</el-button>
        </template>
      </el-table-column>
    </el-table>
    <v-dialog title="详情"
              :show.sync='detailsVisible'>
      <div class="operation">
        <el-popover placement="bottom"
                    width="200"
                    v-model="popover.RejectVisible"
                    trigger="click">
          <el-button slot="reference"
                     type="danger"
                     :loading="RejectLoading">驳回</el-button>
          <div style="text-align:right">
            <el-input type="textarea"
                      :autosize="{ minRows: 4, maxRows: 6}"
                      placeholder="请输入驳回理由"
                      v-model="reason">
            </el-input>
            <el-button type="primary"
                       size="mini"
                       @click="Reject"
                       style="margin-top:10px">确定</el-button>
          </div>
        </el-popover>
        <el-popover placement="top"
                    width="160"
                    v-model="popover.adoptVisible">
          <p>您确定要通过吗?是否继续?</p>
          <div style="text-align: right; margin: 0">
            <el-button size="mini"
                       type="text"
                       @click="popover.adoptVisible = false">取消</el-button>
            <el-button type="primary"
                       size="mini"
                       @click="popover.adoptVisible = false,adopt()">确定</el-button>
          </div>
          <el-button type="primary"
                     slot="reference"
                     :loading="adoptLoading">通过</el-button>
        </el-popover>

      </div>
      <el-table border
                class="details"
                :data="rowData.detail"
                :span-method="objectSpanMethod">
        <el-table-column label="物料名称"
                         prop="materiel"
                         align="center"></el-table-column>
        <el-table-column label="物料数量"
                         prop="num"
                         align="center"></el-table-column>
        <el-table-column label="物料备注"
                         prop="remarks"
                         align="center"></el-table-column>
      </el-table>

    </v-dialog>
    <v-pagination :total='total'
                  :page.sync='page'
                  @pagination='init' />
  </div>
</template>
<script>

export default {
  data () {
    return {
      shoplist: [],
      page: 1, //当前页
      total: 0, //总页数
      rowData: [],
      detailsVisible: false,
      adoptLoading: false,
      RejectLoading: false,

      reason: '', //驳回理由
      popover: {
        RejectVisible: false,
        adoptVisible: false
      }
    }
  },
  methods: {
    async init (data) { //获取物料审核列表
      try {
        const res = await this.api.shoplist(Object.assign({}, data, { page: this.page }))
        this.shoplist = res.data.list || []
        this.total = res.data.rows || 0;
      } catch (err) {
        throw (err)
      }
    },
    async adopt () { //物料详情通过
      try {
        this.adoptLoading = true
        const res = await this.api.shopadopt(Object.assign({}, { id: this.rowData.id }))  //id 物料订单id
        res.code ? this.$message({ message: res.msg, type: 'success', onClose: (() => this.detailsVisible = false, this.popover.adoptVisible = false) }) : this.$message.error(res.msg)
        this.adoptLoading = false
      } catch (err) {
        throw (err)
      }
    },
    async Reject () {  //驳回
      if (!this.reason) {
        this.$message.error('请输入驳回理由')
        return
      }
      try {
        this.RejectLoading = true
        const res = await this.api.shopreject({ id: this.rowData.id, reason: this.reason })  //id 物料订单列表id reason 驳回理由
        res.code ? this.$message({ message: res.msg, type: 'success', onClose: (() => this.detailsVisible = false, this.popover.RejectVisible = false) }) : this.$message.error(res.msg)
        this.RejectLoading = false
      } catch (err) {
        throw (err)
      }
    },
    objectSpanMethod ({ rowIndex, columnIndex }) {
      if (columnIndex === 3) {
        if (rowIndex % this.details.length === 0) {
          return {
            rowspan: this.details.length,
            colspan: 1
          }
        } else {
          return {
            rowspan: 0,
            colspan: 0
          }
        }
      }
    }
  },
  mounted () {
    this.init()
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.operation {
  padding-bottom: 20px;
  text-align: right;
  button {
    margin-left: 10px;
  }
}
</style>
